<template>
    <div>
        <div class='all' @click="change('all')">一共{{ total }}条任务！</div>
        <div class='yes' @click="change('checked')">选中了{{ checkCount }}条任务！</div>
        <div class='no' @click="change('unchecked')">未选中{{ unCheckCount }}条任务！</div>
        <TodoHeader @addTask='addTask'/>
        <TaskItem
            v-for="(task,index) in list"
                :task="task" :index="index"
                :key="task.id"
                @dissapear="dissapearHandler"
                @remove="removeHandler"
                v-show="status==='all'"
        ></TaskItem>
        <TaskItem2
            v-for="(task,index) in check"
                :task="task" :index="index"
                :key="task.id"
                @dissapear="dissapearHandler"
                @remove="removeHandler"
                v-show="status==='checked'"
        ></TaskItem2>
        <TaskItem3
            v-for="(task,index) in uncheck"
                :task="task" :index="index"
                :key="task.id"
                @dissapear="dissapearHandler"
                @remove="removeHandler"
                v-show="status==='unchecked'"
        ></TaskItem3>
        
    </div>
</template>

<script>

import { nanoid } from 'nanoid'
//拿子组件（TodoList.vue/TodoHeader.vue）

import TodoHeader from './TodoHeader.vue';
// import TaskItem1 from './TaskItem1.vue';
import TaskItem from './TaskItem.vue';
import TaskItem2 from './TaskItem2.vue';
import TaskItem3 from './TaskItem3.vue';
    export default {
            components:{
                TodoHeader,
                TaskItem,
                TaskItem2,
                TaskItem3,
            },
            data(){
                return {
                    status:'all',
                    check:[],
                    uncheck:[],
                    list:[]
                }
            },
            methods:{
                filterCheck(){
                    this.check = this.list.filter((task) =>task.checked)
                    this.uncheck = this.list.filter((task) => !task.checked)
                },
                addTask(v){
                    this.list.push({
                            name : v,
                            checked : false,
                            id : nanoid()
                        })
                        this.filterCheck()
                },
                dissapearHandler(index){
                    this.list[index].checked = !this.list[index].checked;
                    this.filterCheck()
                },
                removeHandler(index){
                    this.list.splice(index,1);
                    this.filterCheck()
                },
                change(v){
                    this.status = v
                }
            },
            computed: {
                total(){
                    return this.list.length
                },
                checkCount(){
                    // let array = this.list.filter((task)=>{
                    //     return task.checked;
                    // })
                    return this.check.length
                },
                unCheckCount(){
                    // let array = this.list.filter((task)=>{
                    //     return !task.checked;
                    // })
                    return this.uncheck.length
                }
            }
    }
</script>

<style scoped>
    .all{
        background-color: rgb(221, 247, 188);
        width: 200px;
        margin:0 auto;
        cursor: pointer;
    }
    .yes{
        background-color: rgb(198, 222, 243);
        width: 200px;
        margin:0 auto;
        cursor: pointer;
    }
    .no{
        background-color: #ffdcdc;
        margin:0 auto;
        width: 200px;
        cursor: pointer;
    }
</style>